<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item">
        <img src="@/assets/imgSchoolHouse/icon3.svg">
        <div class="__num">
          <count-to class="val" :start-val="0" :end-val="laborForce" :decimals="0" :duration="3600" /><!--<span class="unit">人日</span>-->
          <div class="label">本月投入劳动力总量</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="item">
        <div class="__num rise">
          <div class="value">
            <count-to class="val" :start-val="0" :end-val="yoy" :decimals="1" prefix="" suffix="%" :duration="3600" />
          </div>
          <div class="label">同比</div>
        </div>
      </div>
      <!-- 本月投入劳动力总量 -->
    </div>
    <div class="divider"></div>
    <div class="chartBox">
      <eChart :option="option"></eChart>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import countTo from 'vue-count-to'
  export default {
    name: 'itemLeftBottom',
    components: { countTo },
    data() {
      return {
        laborForce: 19339,
        yoy: 1.3,
        option: {}
      }
    },
    mounted() {
      let obj = {
        xAxisData: [],
        seriesData: [
          {
            name: '劳动力投入情况',
            data: [879, 759, 908, 435, 686, 762, 860, 529, 939, 887, 947, 980, 1120, 712, 1043, 1052, 974, 1082, 1053, 1031, 1023, 1011, 953, 1034, 1022, 865] },
          {
            name: '平均数',
            data: []
          }
        ]
      }
      let total = _.sumBy(obj.seriesData[0].data)
      let len = 26
      for (let i = 1; i <= len; i++) {
        obj.xAxisData.push(i)
        obj.seriesData[1].data.push((total/len).toFixed(2))
      }
      this.option = this.getOption(obj)
    },
    methods: {
      getOption({xAxisData, seriesData}){
        return {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(8,132,255, 1)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(8,132,255, .1)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }, '#33EDFD'],
          legend: {
            top: '10px',
            right: 0,
            data: seriesData.map(item => {
              return item.name
            }),
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            left: '5px',
            right: '10px',
            top: '50px',
            bottom: '20px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              let html = ''
              for (let i = 0; i < params.length; i++) {
                const formatNum = (value) => {
                  if(!value&&value!==0) return 0;
                  let str = value.toString();
                  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                  return str.replace(reg,"$1,");
                }
                let val = params[i].value ? params[i].value : 0
                let name = i===0 ? `<div>${params[i].name}</div>` : ''
                html += `
                  <div class="tooltip">
                    <div class="item">
                        <div class="${i>1?'marker':''}">${params[i].marker}</div>${params[i].seriesName}<span>${formatNum(val)}</span>
                    </div>
                  </div>
                `
              }
              return html
            },
            textStyle: {
              // fontSize: 32,
              color: '#fff'
            },
            borderColor: 'rgba(0,161,255,0.42)', // transparent
            backgroundColor: ' rgba(1,33,59,0.65)', // transparent
            padding: [5, 10]
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255, .16)',
              }
            },
            axisLabel: {
              interval: 'auto',
              fontSize: 14,
              color: 'rgba(255,255,255,0.8)'
            }
          },
          yAxis: [
            {
              name: '人数：人',
              type: 'value',
              min: 0,
              // max: 500,
              // interval: 100,
              nameTextStyle: {
                align: 'center',
                fontSize: 16,
                color: '#fff'
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                color: 'rgba(255,255,255,0.8)'
              },
              splitLine: {
                show: true, // 是否显示分隔线
                lineStyle: {
                  color: 'rgba(255,255,255,0.16)',
                  type: 'dashed',
                  width: 1
                }
              },
              axisLine: {
                show: false
              },
              splitArea: {
                show: false // 是否显示分隔区域
              }
            },
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 30
            },
            {
              start: 0,
              end: 30,
              bottom: 10,
              showDetail: false,
              showDataShadow: false,
              fillerColor: 'rgba(7,124,220,1)', //滑块的颜色
              backgroundColor: 'rgba(7,124,220,0.24)',  // 滑块轨道的颜色
              dataBackgroundColor: 'transparent',
              handleColor: 'transparent',
              borderColor: 'transparent', // 滑块轨道边框的颜色
              height: 3,   // 滑块高度
              moveHandleIcon: 'none',
              handleIcon: 'none',
              zoomLock: true,
              zoomOnMouseWheel: false,
              brushSelect: false,
              brushStyle: {
                borderCap: 'round',
              },
            }
          ],
          series: [
            {
              ...seriesData[0],
              type: 'bar',
              barMaxWidth: 8,
            },
            {
              ...seriesData[1],
              type: 'line',
              symbolSize: 0,
              showSymbol: false,
              emphasis: {
                scale: false
              }
            }
          ]
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 100%;
    display: grid; grid-template-rows: 70px 4px auto; grid-gap: 24px;
    ._top {
      display: flex; justify-content: space-between;
      .item {
        /*display: grid; grid-template-columns: 1fr 1fr;*/
        display: flex; align-items: center;
        img { width: 60px; height: 60px; margin-right:24px;}
        .__num {
          .val { font-size: 24px; color: #00FFFA; font-family: DINPro; letter-spacing: 1px; }
          .unit { font-size: 16px; font-family: PingFangSC; }
          .label { font-size: 16px; font-family: PingFangSC; }

          &.rise {
            text-align: center;
            .value {
              .val { color: #fff; }
              &:after {
                content: '↑'; display: inline-block; color: #D9001B; font-size: 20px;
                /*width: 0; height: 0; border: 8px solid; border-color: transparent transparent #D9001B transparent*/
              }
            }
          }
        }
      }
      .line {
        width: 1px; height: 100%; background: rgba(76,154,255,.5);
      }
    }
    .divider {
      width: 100%;
      background: url('~@/assets/imgSchoolHouse/divider_s.svg') no-repeat;
    }
  }
  ::v-deep .tooltip {
    .item {
      display: flex; align-items: center; color: rgba(255,255,255,.8);
      .marker { visibility:hidden }
      span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
    }
  }
</style>
